<template>
  <div class="content">
    <div class="bgc">
      <div class="titleBgc"><div class="title">计算机就业全景概览</div></div>
      <div class="panel">
        <div class="top">
          <div class="category"><category></category></div>
          <div class="chinaMap"><chinaMap></chinaMap></div>
        </div>
        <div class="bottom">
          <div class="stackedLine"><stackedLine></stackedLine></div>
          <div class="pie"><pie></pie></div>
        </div>
      </div>
      <div class="footer"></div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import category from "./category.vue";
import chinaMap from "./chinaMap.vue";
import stackedLine from "./stackedLine.vue";
import pie from './pie.vue'
</script>

<style scoped lang="less">
* {
  margin: 0;
  padding: 0;
  color: rgb(184, 180, 180);
}
.content {
  display: flex;
  width: 100%;
  height: 100%;
  .bgc {
    background: url("../assets/img/大屏背景图.png");
    width: 100%;
    height: 100%;
    position: absolute;
    background-size: 100% 100%;
    z-index: 1;
    .titleBgc {
      display: flex;
      justify-content: center;
      align-items: center;
      background: url("../assets/img/头部背景.png");
      width: 100%;
      height: 5%;
      background-size: 100% 100%;
      z-index: 1;
      .title {
        font-size: 22px;
        font-weight: 480;
        z-index: 2;
      }
    }
    .panel {
      width: 100%;
      height: 100%;
      .top {
        display: flex;
        justify-content: space-between;
      }
      .bottom {
        display: flex;
        justify-content: space-between;
      }
    }

    .footer {
      position: absolute;
      bottom: -2px;
      background: url("../assets/img/底部背景图.png");
      width: 100%;
      height: 5%;
      background-size: 100% 100%;
    }
  }
}
</style>
